<template>
    <div class="seach">

    <div class="seachbox">
        <div class="box">
            <input type="text" @keyup.enter="seachFun">
            <div class="icon">
                <img src="../assets/img/seach.svg" alt="" class="auto-img">
            </div>
        </div>
        
    </div>
    <div class="navtitle">
        <ul>
            <li class="con" v-show="show"><a href="#" style="font-size:20px;">为你推荐</a></li>
        </ul>
        <ul>
            <li class="con" v-show="!show"><a href="#" style="font-size:20px;">搜索结果</a></li>
        </ul>
    </div>
    <hr>    
        
        <div class="main1" v-show="show">
            <div class="container">
                <div class="box" v-if="Lists">
                    <div class="content" @click="todetails(item.slug)" v-for="item in Lists" :key="item.slug">
                        <div class="imgbox">
                            <img :src="item.image.large" alt="">                    
                        </div>
                        <div class="boxmain">
                           <div class="user">
                            <p>{{item.title}}</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" :src="item.user.avatar.large" alt="">
                                    </div>
                                    <p style="margin-left:10px;">{{item.user.name}}</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>{{item.like_count}}</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>{{Comment.length}}</p>
                                </div>
                            </div>
                        </div> 
                        </div>
                        
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="container">
            <div class="databox" v-show="searchdata.length!=0">
                <div class="searchdata" v-for="item in searchdata" :key="item.slug">
                <div class="top" @click="router_details(item.slug)"  :style="{ 'background-image':'url('+item.image.large+')' }">
                    <!-- <img src="../assets/img/pia_100000073.jpg" alt="" class="auto-img"> -->
                </div>
                <div class="btm">
                    <h5 @click="router_details(item.slug)">{{item.title}}</h5>
                    <p>设备:<span>{{item.equipment.name}}</span></p>
                    <div class="info">
                        <div class="eyes">
                            <div class="icon">
                                <img src="../assets/img/eyes.svg" alt="" class="auto-img">
                            </div>
                            <p style="margin-left:4px;">{{item.view_count}}</p>
                        </div>
                        <div class="eyes">
                            <div class="icon" @click="goods(item.slug)">
                                <img src="../assets/img/goods.png" alt="" class="auto-img" v-show="item.goods==0"> 
                                <img src="../assets/img/good.png" alt="" class="auto-img" v-show="item.goods==1"> 
                            </div>
                            <p style="margin-left:4px;">{{item.like_count}}</p>
                        </div>
                    </div>
                    <div class="hr"></div>
                    <div class="user">
                        <div class="left">
                            <div class="head">
                                <img :src="item.user.avatar.large" alt="" class="auto-img">
                            </div>
                            <div class="name">{{item.user.name}}</div>
                        </div>
                        <p>{{item.created_at | Time}}</p>
                    </div>
                </div>
            </div>
            </div>
            
        </div>
        <el-empty style="height:80vh;" v-if="searchdata.length==0 && !show" description="暂无内容哦~"></el-empty>
    <foot-navbar></foot-navbar>
    </div>
</template>

<script>

import FootNavbar from '@/components/FootNavbar.vue'
import { getLists } from '../api/lists'; 
import { getComment } from '@/api/comment';
    export default {
        components:{

            FootNavbar,
        },
        data() {
            return {
                Lists: null,
                searchdata:[],
                Comment:[],
                show:true
            };
        },
        methods:{
            // 点赞功能
            goods(i){
                // 判断是否登录
                let token = window.localStorage.getItem("token");
                if(!token){
                    this.$router.push("/record")
                    return
                }
                //获取当前id所在数组下标
                let index=this.Lists.findIndex((item)=>item.slug==i);
                // 如果当前id下的数组中的goods==0为取消点赞
                if(this.Lists[index].goods==0){
                    // 改变点赞状态为1 已点赞为goods==1
                    this.Lists[index].goods=1; 
                    // 点赞数加1
                    this.Lists[index].like_count+=1;
                    //将数据存入local story中
                    window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
                }else if(this.Lists[index].goods==1){
                    this.Lists[index].goods=0;
                    this.Lists[index].like_count-=1;
                    window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
                }
            },
            // 跳转方法浏览量加1
            router_details(id){
                // 跳转到对应id的详情页 
                this.$router.push("/details?id="+ id +"");
                let index = this.Lists.findIndex((item)=>item.slug==id);
                // 判断是否登录
                let token = window.localStorage.getItem("token");
                //如果该数据中不存在该数据 则在该数组中添加checked数据，如果不存在浏览量加1
                //并将checked改为true实现只加一次
                if(!("checked" in this.Lists[index]) && token){
                    this.Lists[index].view_count += 1;
                    this.Lists[index].checked = true;
                }
                window.localStorage.setItem("Listsnew",JSON.stringify([this.Lists]));
            
            },
            // 跳转到详情页
            todetails(id){
                this.$router.push("/details?id="+ id +"");
            },
            //搜索
            seachFun(e){
                console.log(e.target.value);
                if(!e.target.value){
                    this.$message.error('请输入内容再试哦~');
                    return
                }
                this.show=false;
                this.searchdata=[];//清除上一次搜索结果
                this.Lists.forEach(item=>{
                    if(item.title.indexOf(e.target.value) != -1){ //存在关键字
                        //将关键字的内容添加进搜索结果数据中
                        this.searchdata.push(item);
                    }
                })
                e.target.value="";
                console.log(this.searchdata);
            },
            DataFun(){
                getLists().then(data=>{
                    this.Lists=data.data.items;
                    console.log(this.Lists);
                    // 给每个数据添加新数据  
                    for(let i=0;i<this.Lists.length;i++){
                        // 点赞状态goods
                        this.Lists[i].goods=0;
                        // 收藏collect
                        this.Lists[i].collect=false;
                        // 关注状态
                        this.Lists[i].care=false;

                    }
                    // local story如果存在数据则使用localstory中的数据
                    if(window.localStorage.getItem("Listsnew")){
                        this.Lists=JSON.parse(window.localStorage.getItem("Listsnew"))[0];
                    }
                }),
                // 接收评论区数据
                getComment().then(data=>{
                    this.Comment=data.data.items;
                    // 更新数据
                    if(window.localStorage.getItem("Comment")){
                        this.Comment=JSON.parse(window.localStorage.getItem("Comment"))[0];
                    }
                })
            
            },
            
        },
        //过滤器
        filters:{
            // 时间过滤
            Time(data){
                let t=data.split('T')[0].split("-");
                // console.log(t);
                let time=t[0]+"年"+t[1]+"月"+t[2]+"日";
                // console.log(time);
                return time;
            }
        },
        created(){
            this.DataFun();
        }
    }
</script>

<style lang="scss" scoped>
.seach{
    .navtitle {
    margin-top: -2px;
    width: 100%;
    background-color: #fff;
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 10;
    box-shadow: 0 1px 1px #eee;
    ul {
      display: flex;
      justify-content: center;
      li {
        display: flex;
        align-items: center;
        height: 60px;
        font-weight: bold;
        font-size: 14px;
        margin: 0 15px;
        a {
          color: #000;
        
        }
        }
      }
    
  }
    .seachbox{
        padding: 40px 0 14px 0;
        margin: 0;
        .box{
            width: 393px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 25px;
            margin: 0 auto;
            overflow: hidden;
            display: flex;
            align-items: center;
            input{
                width: 336px;
                border: 0;
                padding-left: 25px;
                height: 36px;
                outline: none;
                box-sizing: border-box;
            }
            .icon{
                margin-left: 20px;
                width: 17px;
                height: 17px;
            }
        }   
        
    }
    .main1 {
    padding-top: 20px;
    background-color: #f7f8f9;
    .box {
      column-gap: 20px;
      column-count: 3;
      margin-bottom: 20px;
      .content {
        cursor: pointer;
        .imgbox {
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .content {
      position: relative;
      overflow: hidden;
      margin-bottom: 16px;
      &:hover {
        .boxmain {
            transition: all 0.2s linear;
            opacity: 1;
        }
      }
      .boxmain{
        opacity: 0;
        .user {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.6) 97%);
        padding: 16px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        bottom: 4px;
        // left: -387px;
        left: 0;
        p {
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 10px;
        }
        .usermain {
          p {
            margin-bottom: 0;
          }
        }
      }
      }
      
    }
    .usermain {
      display: flex;
      justify-content: space-between;
      .headimg {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        overflow: hidden;
      }
      .useimg {
        display: flex;
        align-items: center;
      }
      .state {
        display: flex;
        align-items: center;
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
          margin-left: 10px;
          margin-top: -3px;
        }
      }
    }
  }
  .databox{
    display: flex;
    background-color: #f7f8f9;
    flex-wrap: wrap;
  }
  .searchdata{
    margin: 20px 0;
    margin-right: 20px;
    width: 285px;
    height: 320px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 3px #ccc;
    &:nth-child(4n){
        margin-right: 0;
    }
    .top{
        width: 100%;
        height: 190px;
        cursor: pointer;
        background-position: 50%;
        background-size: cover;
    }
    .btm{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 130px;
        box-sizing: border-box;
        padding: 10px 13px;
        h5{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            &:hover{
                color: #1088f2;
            }
        }
        p{
            font-size: 12px;
            color: #999;
            span{
                color: #1088f2;
                margin-right: 4px;
            }
        }
        .hr{
            width: 100%;
            height: 1px;
            background-color: #ccc;
            color: #ccc;
        }
        .info{
            display: flex;
            .eyes{
                display: flex;
                margin-right: 20px;
                .icon{
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
            }
        }
        .user{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                display: flex;
                align-items: center;
                .head{
                    width: 24px;
                    height: 24px;
                    margin-right: 4px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .name{
                    color: #333;
                    font-size: 12px;
                    cursor: pointer;
                    &:hover{
                        color: #1088f2;

                    }
                }
            }
        }
    }
  }
}
</style>